<template>
  <div class="container">
    <div class="warp">
      <div class="header">
        <ul>
          <li @click="getSongList()">全部</li>
          <li v-for="item in headerTitle" :key="item.id" @click="handlepush(item.id)">{{item.name}}</li>
        </ul>
      </div>

      <div class="contant">
        <SonList :database="SongList" @getSongListinfo="getSongListinfo"></SonList>
      </div>
      <div style="width: 100%; position: relative; height:30px;">
      </div>
    </div>
  </div>
</template>

<script>
import SonList from '@/components/Front/Contentlist/list.vue'
import {mapMutations} from 'vuex'
export default {
  components:{
    SonList,
  },

  data(){
    return {
      SongList:[],
      headerTitle:[]
    }
  },
  
  methods:{
    ...mapMutations('editfo',['changeDatas']),
    async getSongList(){
      const res = await this.$axios.get("SongList/GetAll")
      this.SongList = res
    },
    getSongListinfo(val){
      this.changeDatas(val)
      console.log(val)
      this.$router.push('/layout/songlisdet')
    },
    async getTitle(){
      const res = await this.$axios.post(`tagMap/SelectByTagType?targetType=0`)
      console.log("wwewe2039000")
      console.log("title="+res)
      this.headerTitle = res
    },
    async handlepush(val){
      if(val == null){
        return null
      }
      const res = await this.$axios.post(`tagMap/SelectMainTag?targetType=0&tagId=${val}`)
      const ase = await this.$axios.post(`SongList/SelectMainSongList?ids=${res}`)
      this.SongList = ase
    }
  },
  created(){
    this.getTitle()
    this.getSongList()
  }
}
</script>

<style lang="less" scoped>
ul{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100%;
  height: 100%;
  margin-top: 86px;
}
.container .warp{
  margin: 0 150px;
  background-color: #eee;
}
.warp .header{
  height: 50px;
  width: 100%;
  ul{
    display: flex;
    text-decoration: none;
    flex-wrap: wrap;
    height: 100%;
    li{
      margin-left: 20px;
      width: 60px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      font-weight: 600;
      &:hover{
        cursor: pointer;
        border-bottom: 2px solid #00FF7F;
        color: #00FF7F;
      }
    }
  }
}
.warp .contant{
  height: calc(100% - 100px);
  margin-top: 20px;
}
</style>